<!--服务器首页-->
<template>
  <scroller class="scroller" @rightBtn="rightBtn">
    <div class="wrapper">        
      <LImage class="bg-image" :src="Config.img('bushu_bg.png')"></LImage>

      <!-- 标签 -->
      <div class="tag">
        <LImage class="tag-image" :src="Config.img('bushu_1.png')"></LImage>
        <div class="width10"></div>
        <text class="font28 text1">{{T('高频稳定')}}</text>

        <div class="width20"></div>
        <LImage class="tag-image" :src="Config.img('bushu_2.png')"></LImage>
        <div class="width10"></div>
        <text class="font28 text1">{{T('经济实惠')}}</text>


        <div class="width20"></div>
        <LImage class="tag-image" :src="Config.img('bushu_3.png')"></LImage>
        <div class="width10"></div>
        <text class="font28 text1">{{T('独享或共享')}}</text>
      </div>

      <!-- 配置 -->
      <div class="height610"></div>
      <div class="config" v-for="(item, index) in servers" v-bind:key="index">
        <div class="config-content">
          <text class="config-text">{{T(item.describe)}}</text>

          <div class="config-info">
            <text class="config-text">{{item.cpu + T('核') + item.memory  + 'G' + '\n' + T('规格')}}</text>
            <div class="config-line"></div>
            <text class="config-text">{{item.hardDisk + 'G' + '\n' + T('高速硬盘')}}</text>
            <div class="config-line"></div>
            <text class="config-text">{{item.tapeWidth + 'M' + '\n' + T('带宽')}}</text>
            <div class="config-line"></div>
            <text class="config-text">{{'IP' + '\n' + T('独享')}}</text>
          </div>

          <div class="config-but" @click="buyClick(item)">
            <text class="font30 text1">{{T('立即购买')}}</text>
          </div>
          <!-- <div class="config-price">
            <div class="column">
              <text class="config-oldPrice" v-if="math.getNumber(item.originalPrice) > math.getNumber(item.currentPrice)">{{T('原价')+ item.originalPrice}}</text>
              <text class="font44 text1">{{item.currentPrice + ' VTN/'+T('月')}}</text>
            </div>

            <div class="config-but" @click="buyClick(item)">
              <text class="font30 text1">{{T('立即购买')}}</text>
            </div>
          </div> -->
        </div>

        <div class="config-title">
          <LImage class="config-title-image" :src="Config.img('bushu_title.png')"></LImage>
          <text class="font32 text1">{{T(item.serverName)}}</text>
          <text class="font22 color-hui">{{'(' + T(item.serverAddress) + ')'}}</text>
        </div>
      </div>

      <!-- 说明 -->
      <div class="explain">
        <text class="explain-title">{{T('说明')}}</text>
        
        <text class="explain-text">{{T(' ')}}</text>
        <text class="explain-text">{{T('1、目前Vtrading提供共享和私有两种类型的服务器供选择，您可根据实际需要购买相应服务器来执行策略。')}}</text>
        
        <text class="explain-text">{{T(' ')}}</text>
        <text class="explain-text">{{T('2、共享服务器购买后立即生效，在启动策略时选择该共享服务器即可，每台共享服务器上限5个策略位。')}}</text>
        
        <text class="explain-text">{{T(' ')}}</text>
        <text class="explain-text">{{T('3、私有服务器将独立执行所有策略且不与他人共享，执行效率更高，更适合策略多、频率高的用户，私有服务器购买后将在一个工作日内部署上线。')}}</text>
        
        <text class="explain-text">{{T(' ')}}</text>
        <text class="explain-text">{{T('4、私有服务器上线后，您可以在启动策略时指定该服务器执行策略，每台私有服务器上限100个策略位。')}}</text>
        
        <text class="explain-text">{{T(' ')}}</text>
        <text class="explain-text">{{T('5、所有服务器到期后将会被自动删除，服务器上所有执行的策略组将被自动终止，请及时关注。')}}</text>
       
        <text class="explain-text">{{T(' ')}}</text>
        <text class="explain-text">{{T('6、服务器由第三方云服务商提供，购买成功后立即生效，不支持退款，敬请谅解！')}}</text>
      </div>
    </div>
  </scroller>
</template>

<script>

//功能
import Config from "@/_js/config";
import math from "@/_js/math";
import modal from "@/_js/modal";
import navigator from "@/_js/navigator";

const weexFunction = weex.requireModule("WeexFunction");
import weexHttp from "@/_js/https"; ;

import I18N from "@/_i18n/i18n";
var T = I18N.t;
weexFunction.setTitle(T("服务器"));
weexFunction.setRightBtn(T("我的服务器"));

export default {
  
  data() {
    return {
      T:T,
      Config:Config,
      math:math,
      isShow:false,

      servers:[],
    };
  },

  mounted() {
    this.httpServerConfig();
  },

  methods: {


    /*************************************************通信触发*/
    //右按钮触发
    rightBtn() {
      navigator.open('', 'server/ServerMy');
    },

    /********************************** HTTP*/
    //服务器配置
    httpServerConfig() {

      var param = {};
      weexHttp.post("server/queryServerConfigNew",param,true,(data) => {

        if (data.status == 200) {
          weexFunction.debugLog(data);
          this.servers = data.data;
          this.isShow = true;
        } else {
          modal.toast(data.msg);
        }
      });
    },
    
    /********************************** 点击触发*/
    //购买
    buyClick(item) {
      var param = {
        'configId':item.configId, 
        'serverName':item.serverName,
        'datas':item.priceList, 
        'isBuy':false};
      navigator.openDialog("server/ServerBuy", param);
    }
  },
};

</script>


<style src="@/_css/style.css"></style>
<style scoped>
.scroller {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9;

  background-color: #040445;
}
.wrapper{
  width:750px;
  flex-direction: column;
  align-items: center;
}
.bg-image {
  position: absolute;
  width: 750px;
  height: 878px;
}
.color-hui {
  color: #D0E3FE;
}

/******************* 标签*/
.tag {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 174px;
}
.tag-image {
  width: 40px;
  height: 40px;
}

/******************* 配置*/
.config {
  flex-direction: column;
  align-items: center;
  width: 690px;
  margin-bottom: 60px;
}

.config-title {
  position: absolute;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 306px;
  height: 88px;
}

.config-title-image {
  position: absolute;
  width: 306px;
  height: 88px;
}
.config-content {
  flex-direction: column;
  align-items: center;
  width: 690px;
  margin-top: 42px;
  background-color: #0B0F76;

  border-radius: 16px;
  border-width: 2px;
  border-color: #5251FF;

  padding-top: 82px;
  padding-bottom: 40px;
  margin-top: 42px;
}

.config-info {
  flex-direction: row;
  align-items: center;
  background-color: #12168E;
  width: 630px;
  height: 114px;
  border-radius: 8px;

  margin-top: 40px;
  margin-bottom: 40px;
}
.config-text {
  text-align: center;
  flex: 1;
  font-size: 26px;
  font-family: DINPro-Regular, DINPro;
  font-weight: 400;
  color: #FFFFFF;
}
.config-line{
  width: 1px;
  height: 58px;
  background-color: #1677FE;
}

.config-price {
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  width: 630px;
}
.config-oldPrice {
  text-decoration:line-through;
  font-size: 24px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #1677FE;
}
.config-but {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 64px;
  background-color: #1677FE;
  border-radius: 8px;
  padding-left: 28px;
  padding-right: 28px;
}

/******************* 说明*/
.explain {
  background-color: #12168E;
  width: 690px;
  border-radius: 16px;

  padding-left: 40px;
  padding-right: 40px;
  padding-top: 40px;
  padding-bottom: 40px;

  margin-bottom: 60px;
}
.explain-title {
  text-align: center;
  font-size: 32px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  line-height: 45px;
  color: #8ABBFE;
}
.explain-text {
  font-size: 24px;
  font-family: DINPro-Regular, DINPro;
  font-weight: 400;
  line-height: 40px;
  color: #8ABBFE;
}

/******************* 间距*/
.width10 {
  width: 10px;
}
.width20 {
  width: 20px;
}
.height610 {
  height: 610px;
}
</style>